<template>
  <a-layout>
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
        <a-menu-item key="/">
          <router-link to="/">首页</router-link>
        </a-menu-item>
        <a-menu-item key="/admin/user">
          <router-link to="/admin/user">用户管理</router-link>
        </a-menu-item>
        <a-menu-item key="/admin/ebook">
          <router-link to="/admin/ebook">电子书管理</router-link>
        </a-menu-item>
        <a-menu-item key="/admin/category">
          <router-link to="/admin/category">分类管理</router-link>
        </a-menu-item>
        <a-menu-item key="/about">
          <router-link to="/about">关于我们</router-link>
        </a-menu-item>
        <a-menu-item key="/login">
          <a-button @click="showLoginModel">登录</a-button>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
  </a-layout>
  <a-modal v-model:visible="visible" title="Title" @ok="handleOk">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="登录名">
        <a-input v-model:value="formState.loginName" />
      </a-form-item>
      <a-form-item label="密码">
        <a-input v-model:value="formState.password" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk"
        >确认</a-button
      >
    </template>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "the-header",
  components: {},
  setup: function() {
    const formState = ref();
    const visible = ref();
    formState.value = {};
    visible.value = false;
    const showLoginModel = () => {
      visible.value = true;
    };
    return {
      formState,
      visible,
      showLoginModel
    };
  }
});
</script>
